<script setup>
import { ref, reactive, computed } from 'vue'

// 响应式数据区
const userName = ref('')
const userAge = ref('')
const techDirection = ref('前端')
const skills = reactive({
  HTML: false,
  CSS: false,
  JavaScript: false,
  Vue: false,
  Node: false
})

// 计算属性区
const isValidAge = computed(() => {
  // 实现年龄验证逻辑
  return userAge.value >= 18 && userAge.value <= 100
})

const selectedSkillsCount = computed(() => {
  // 计算选中技能数量
  return Object.values(skills).filter(Boolean).length
})

const userStatus = computed(() => {
  // 生成用户状态标签逻辑

  // 获取用户输入的姓名、年龄和选中技能数量
  const name = userName.value.trim();
  const age = parseInt(userAge.value);
  const skillCount = Object.values(skills).filter(Boolean).length;

  // 如果未填写任何信息，默认为"新用户"
  if (!name && !age && !skillCount) {
    return '新用户';
  }

  // 如果年龄 >=35 且 技能 >=3，则标记为"资深开发者"
  if (age >= 35 && skillCount >= 3) {
    return '资深开发者';
  }

  // 其他情况标记为"潜力开发者"
  return '潜力开发者';
});


const cardTheme = computed(() => {
  // 返回动态样式对象
    switch (techDirection.value) {
      case '前端':
        return { backgroundColor: '#007BFF', color: 'white' }; // 蓝色主题
      case '后端':
        return { backgroundColor: '#28A745', color: 'white' }; // 绿色主题
      case '全栈':
        return { backgroundColor: '#6F42C1', color: 'white' }; // 紫色主题
      default:
        return {}; // 默认无样式
    }
  })

</script>

<template>
  <div class="container">
    <!-- 输入表单区 -->
    <div class="form-section">
      <div>
        <label>姓名：</label>
        <input type="text" v-model="userName">
        <span v-if="userName.length > 0 && userName.length < 2" class="error">
          姓名至少需要2个字符
        </span>
      </div>
      <!-- 补充其他输入项 -->
      <div>
        <label>年龄：</label>
        <input type="number" v-model="userAge">
        <span v-if="!isValidAge" class="error">
          请输入有效的年龄
        </span>
      </div>
      <div>
        <label>技术方向：</label>
        <select v-model="techDirection">
          <option value="前端">前端</option>
          <option value="后端">后端</option>
          <option value="全栈">全栈</option>
        </select>
      </div>
      <div>
        <label>技能：</label>
        <div>
          <label>
            <input type="checkbox" v-model="skills.HTML"> HTML
          </label>
          <label>
            <input type="checkbox" v-model="skills.CSS"> CSS
          </label>
          <label>
            <input type="checkbox" v-model="skills.JavaScript"> JavaScript
          </label>
          <label>
            <input type="checkbox" v-model="skills.Vue"> Vue
          </label>
          <label>
            <input type="checkbox" v-model="skills.Node"> Node.js
          </label>
        </div>
        <span v-if="selectedSkillsCount < 2" class="error">
          至少选择2项技能
        </span>
      </div>
    </div>

    <!-- 信息展示区 -->
    <div class="info-card" :style="cardTheme">
      <h2>{{ userName || '未命名用户' }}</h2>

      <!-- 补充信息展示内容 -->
      <p>年龄：{{ userAge || '未知' }}</p>
      <p>技术方向：{{ techDirection || '未知' }}</p>
      <p>技能：{{ Object.keys(skills).filter(key => skills[key]).join(', ') || '无' }}</p>

      <div class="status-tag">
        {{ userStatus }}
      </div>
    </div>
  </div>
</template>

<style>
/* 补充样式实现动态主题 */

.info-card {
  width:400px;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: white;
  text-align: center;
  margin-top: 20px;
  transition: background-color 0.3s ease;
}

.info-card.blue {
  background-color: #007BFF;
}
.info-card.green {
  background-color: #28A745;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}
.info-card.purple {
  background-color: #6F42C1;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
  .status-tag {
    background-color: white;
    color: #6F42C1;
    padding: 5px 10px;
     border-radius: 5px;
    margin-top: 10px;
    transition: background-color 0.3s ease;
  }
}
.status-tag {
  background-color: white;
  color: black;
  padding: 5px 10px;
  border-radius: 5px;
  margin-top: 10px;
  transition: background-color 0.3s ease;
}
.error {
  color: red;
}

.form-section {
  width: 100%;
  @media (min-width: 768px) {
    width: 50%;
  }
  label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 14px;
    color: #333;
    @media (min-width: 768px) {
      font-size: 16px;
      margin-bottom: 10px;
      font-weight: normal;
      color: #555;
      text-align: left;
      margin-right: 10px;
      width: 100px;
      display: inline-block;
      vertical-align: top;
      text-align: right;
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
```